<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增学期教材</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <link rel="stylesheet" href="/element-ui/fonts/element-icons.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/element-ui/axios.min.js"></script>
    <style>
        body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif; background-color: #f5f6fa; }
        #app { padding: 20px; background-color: #f5f6fa; }
        .page-title-bar { font-size: 26px; font-weight: bold; color: #333; background: #fff; padding: 24px 20px 12px 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; letter-spacing: 2px; text-align: center; animation: fadeInDown 0.8s ease-out; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 8px; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .el-main { padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .el-form-item { margin-bottom: 22px; }
        .box-card { margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); animation: fadeIn 1s ease-out; }
        .box-card .el-card__header { font-weight: bold; font-size: 18px; color: #333; }
        .detail-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #dcdfe6; animation: slideInLeft 0.5s ease-out; }
        .detail-item:last-child { border-bottom: none; }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        .submit-buttons { margin-top: 20px; text-align: center; }
    </style>
</head>
<body>
    <div class="page-title-bar">新增学期教材</div>
    <div id="app">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" ref="form" label-width="120px">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>学期与专业</span>
                        </div>
                        <el-form-item label="学期" prop="term">
                            <el-select v-model="form.term" placeholder="请选择学期">
                                <el-option label="2024春季" value="2024春季"></el-option>
                                <el-option label="2024秋季" value="2024秋季"></el-option>
                                <el-option label="2025春季" value="2025春季"></el-option>
                                <el-option label="2025秋季" value="2025秋季"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业" prop="major">
                            <el-select v-model="form.major" placeholder="请选择专业">
                                <el-option label="计算机系" value="计算机系"></el-option>
                                <el-option label="金融系" value="金融系"></el-option>
                                <el-option label="电子商务系" value="电子商务系"></el-option>
                                <el-option label="大数据系" value="大数据系"></el-option>
                                <el-option label="人工智能系" value="人工智能系"></el-option>
                                <el-option label="艺术设计系" value="艺术设计系"></el-option>
                                <el-option label="医学系" value="医学系"></el-option>
                                <el-option label="环境设计系" value="环境设计系"></el-option>
                                <el-option label="音乐系" value="音乐系"></el-option>
                                <el-option label="老年管理系" value="老年管理系"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>教材明细</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="addDetail">添加教材</el-button>
                        </div>
                        <div v-for="(detail, index) in form.details" :key="index" class="detail-item">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="24" :md="12">
                                    <el-form-item :label="'教材'" :prop="'details.' + index + '.bookId'" :rules="{ required: true, message: '请选择教材', trigger: 'change' }">
                                        <el-select v-model="detail.bookId" placeholder="请选择教材" filterable>
                                            <el-option v-for="book in books" :key="book.id" :label="book.name" :value="book.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="8">
                                    <el-form-item :label="'备注'" :prop="'details.' + index + '.remark'">
                                        <el-input v-model="detail.remark" placeholder="可填写备注"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="4">
                                    <el-button type="danger" @click="removeDetail(index)">删除</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                    <div class="submit-buttons">
                        <el-button type="primary" @click="submitForm('form')">提交</el-button>
                        <el-button @click="goBack">返回</el-button>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        term: '',
                        major: '',
                        details: []
                    },
                    books: [],
                    rules: {
                        term: [ { required: true, message: '请选择学期', trigger: 'change' } ],
                        major: [ { required: true, message: '请选择专业', trigger: 'change' } ]
                    }
                }
            },
            created() {
                this.fetchBooks();
            },
            methods: {
                fetchBooks() {
                    axios.get('/termbook/api/allBooks').then(res => {
                        this.books = res.data;
                    });
                },
                addDetail() {
                    this.form.details.push({ bookId: '', remark: '' });
                },
                removeDetail(index) {
                    this.form.details.splice(index, 1);
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios.post('/termbook/add', this.form)
                                .then(response => {
                                    if (response.data === 'success') {
                                        this.$message.success('添加成功');
                                        this.goBack();
                                    } else {
                                        this.$message.error(response.data || '添加失败');
                                    }
                                })
                                .catch(error => {
                                    console.error('Error adding:', error);
                                    this.$message.error('添加失败');
                                });
                        } else {
                            return false;
                        }
                    });
                },
                goBack() { window.location.href = '/termbook/list'; }
            }
        });
    </script>
</body>
</html> 